<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>活动图标导航菜单</title>
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css'>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <header>
    <nav>
      <a href="#home" style="--clr: #f3219b" class="active">
        <span class="icon">
          <i class="fa-solid fa-house"></i>
        </span>
        <span class="text">Home</span>
      </a>
      <a href="#profile" style="--clr: #2196f3">
        <span class="icon">
          <i class="fa-solid fa-user"></i>
        </span>
        <span class="text">Profile</span>
      </a>
      <a href="#messages" style="--clr: #008a1b">
        <span class="icon">
          <i class="fa-solid fa-comment"></i>
        </span>
        <span class="text">Meessages</span>
      </a>
      <a href="#photos" style="--clr: #dc1dff">
        <span class="icon">
          <i class="fa-solid fa-image"></i>
        </span>
        <span class="text">Photos</span>
      </a>
      <a href="#settings" style="--clr: #d56f1d">
        <span class="icon">
          <i class="fa-solid fa-gear"></i>
        </span>
        <span class="text">Settings</span>
      </a>
      <div class="indicator"></div>
    </nav>
  </header>
  <section id="home">Home</section>
  <section id="profile">Profile</section>
  <section id="messages">Messages</section>
  <section id="photos">Photos</section>
  <section id="settings">Settings</section>
</body>
<script>
  let sec = document.querySelectorAll('section')
  let links = document.querySelectorAll('header nav a')

  window.onscroll = () => {
    sec.forEach(section => {
      let top = window.scrollY
      let offset = section.offsetTop
      let hegiht = section.offsetHeight
      let id = section.getAttribute('id')

      if (top >= offset && top < offset + hegiht) {
        links.forEach(link => {
          console.log(id)
          link.classList.remove('active')
          document.querySelector('header nav a[href*=' + id + ']').classList.add('active')
        })
      }
    })
  }
</script>

</html>